import './App.css';
import { useState } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import { nanoid } from '@reduxjs/toolkit';
import { addTodo } from './states/todoListSlice'
function App() {
    const [todoText, setTodoText] = useState("")
    const todoList = useSelector(state => state.todoList)
    const dispatch = useDispatch();
    const onInputChange = (event) => {
        setTodoText(event.target.value)
    }
    const onAddButtonClick = (event) => {
        // 提交
        dispatch(
            addTodo({
                text: todoText,
                id: nanoid()
            }),
        );
    }
    return (
        <div className="App">
            <div>
                <input type="text" onChange={onInputChange} />
                <button onClick={onAddButtonClick}>添加</button>
            </div>
            <div>
                {
                    todoList.map(todoItem => {
                        return (
                            <div key={todoItem.id}>
                                {todoItem.text}
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default App;
